
import 'package:flutter/material.dart';

class MainView extends StatefulWidget {
  MainView({Key key}) : super(key: key);

  @override
  _MainViewState createState() => _MainViewState();
}

class _MainViewState extends State<MainView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(
      //   title:Text("为己无止境"),
      // ),
      // /路径裁切组件
      body: ClipPath(
        child: Container(
    
          height:320,
          decoration:BoxDecoration(
            color:Color(0xff622F74),
            gradient: LinearGradient(
              colors:[Colors.blue,Colors.deepOrangeAccent],
              begin: Alignment.centerRight,
              end: Alignment(-1.0, -1.0))),
            ),
            // clipper: CurveClipper(), //路径
            clipper: WavyLineClipper(),
          ) ,
        );
  }
}
/// 曲线路径
class CurveClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path()..lineTo(0, size.height-60);
    var firstControlPoint = Offset(size.width/2, size.height);
    var firstEndPoint = Offset(size.width, size.height-60);


    // 贝塞尔函数 传入2个点 控制点和结束点
    // 根据控制点和结束点进行拉伸操作
    path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,firstEndPoint.dx, firstEndPoint.dy);

      path.lineTo(size.width, size.height-60);
      path.lineTo(size.width, 0);
     
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

/// 波浪线路径
class WavyLineClipper extends CustomClipper<Path>{
  @override
  Path getClip(Size size){
    var path = Path()
      ..lineTo(0, size.height - 40.0);

    //第一段曲线控制点
    var firstControlPoint = Offset(size.width/4, size.height);
    var firstEndPoint = Offset(size.width/2.25, size.height-30);
    path.quadraticBezierTo(
        firstControlPoint.dx,
        firstControlPoint.dy,
        firstEndPoint.dx,
        firstEndPoint.dy);

    //第二段曲线控制点
    var secondControlPoint = Offset(size.width/4*3, size.height-90);
    var secondEndPoint = Offset(size.width, size.height-40);
    path.quadraticBezierTo(
        secondControlPoint.dx,
        secondControlPoint.dy,
        secondEndPoint.dx,
        secondEndPoint.dy);

    path..lineTo(size.width, size.height-40)
      ..lineTo(size.width, 0);

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}